<template>
  <div class="pretrial-home-right">
    <div class="pretrial-home-right_title">
      <img src="../../deps/assets/images/big-user.png" alt="" />
    </div>
    <div class="pretrial-home-right_time">
      <p>{{ uaerName }}</p>
      <p>{{ time }}</p>
      <p class="f14">{{ getDay() }}</p>
    </div>
    <div class="pretrial-home-right_btns">
      <div class="line-title">
        <span>政务词条</span>
        <el-button type="text">更多></el-button>
      </div>
      <div class="line-main">
        <el-button type="primary" plain size="mini">政务词条1</el-button>
        <el-button type="primary" plain size="mini">政务词条2</el-button>
        <el-button type="primary" plain size="mini">政务词条3</el-button>
        <el-button type="primary" plain size="mini">政务词条4</el-button>
        <el-button type="primary" plain size="mini">政务词条5</el-button>
        <el-button type="primary" plain size="mini">政务词条6</el-button>
      </div>
    </div>
    <div class="pretrial-home-right_news">
      <div class="line-title">
        <span>热门事项</span>
        <el-button type="text">更多></el-button>
      </div>
      <div class="line-main">
        <p>热门事项1</p>
        <p>热门事项2</p>
        <p>热门事项3</p>
      </div>
    </div>
    <div class="pretrial-home-right_imgs">
      <div class="line-title">
        <span>推荐课程</span>
        <el-button type="text">更多></el-button>
      </div>
      <div class="line-main">
        <img src="../../deps/assets/images/img1.png" alt="" />
        <p>留学生来徐州工作生活</p>
      </div>
      <div class="line-main">
        <img src="../../deps/assets/images/img2.png" alt="" />
        <p>第一类易制毒化学品运输许可</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    clearInterval(this.getTime)
  },
  created() {
    setInterval(this.getTime, 1000)
  },
  data() {
    return {
      uaerName: '桑燕妍',
      time: ''
    }
  },
  methods: {
    check(val) {
      if (val < 10) {
        return '0' + val
      } else {
        return val
      }
    },
    getTime() {
      var date = new Date()
      var hour = date.getHours()
      var minutes = date.getMinutes()
      var second = date.getSeconds()
      var timestr =
        this.check(hour) + ':' + this.check(minutes) + ':' + this.check(second)
      this.time = timestr
    },
    getDay() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var timestr = year + '年' + month + '月' + day + '日  '
      return timestr
    }
  }
}
</script>

<style lang="scss">
.pretrial-home-right {
  &_title {
    height: 180px;
    width: 100%;
    border-radius: 8px 8px 0 0;
    background-color: var(--color-primary);
    position: relative;
    margin-bottom: 50px;
    
    img {
      position: absolute;
      bottom: -50px;
      left: 50%;
      margin-left: -50px;
    }
  }

  &_time {
    padding: 15px 0 30px;
    
    p {
      padding-bottom: 15px;
      text-align: center;
      line-height: 100%;
      font-size: 28px;
      color: #333;
      
      &:first-child {
        font-size: 18px;
      }
      
      &.f14 {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>
